<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../../bower_components/vaadin-form-layout/src/vaadin-form-layout.html">
<link rel="import" href="../../../../bower_components/vaadin-combo-box/src/vaadin-combo-box.html">
<link rel="import" href="../../../../bower_components/vaadin-text-field/src/vaadin-text-field.html">
<link rel="import" href="../../../../bower_components/vaadin-text-field/src/vaadin-password-field.html">

<link rel="import" href="../../../components/form-buttons-bar.html">

<dom-module id="user-form">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
        flex: auto;
        height: 100%;
      }

      vaadin-form-layout {
        flex: auto;
        overflow: auto;
      }
    </style>

    <vaadin-form-layout id="form">
      <h3 id="title"></h3>
      <vaadin-text-field id="email" label="Email (login)" colspan="2"></vaadin-text-field>
      <vaadin-text-field id="first" label="First Name"></vaadin-text-field>
      <vaadin-text-field id="last" label="Last Name"></vaadin-text-field>
      <vaadin-password-field id="password" label="Password" colspan="2"></vaadin-password-field>
      <vaadin-combo-box id="role" label="Role" colspan="2"></vaadin-combo-box>
    </vaadin-form-layout>

    <form-buttons-bar id="buttons"></form-buttons-bar>
  </template>

  <script>
    class UserForm extends Polymer.Element {
      static get is() {
        return 'user-form';
      }

      ready() {
        super.ready();
        this.$.form.addEventListener('change', e => {
          this.$.buttons.$.save.disabled = false;
        });
      }
    }

    window.customElements.define(UserForm.is, UserForm);
  </script>
</dom-module>
